<template>
    <!-- 班级管理页面 -->
    <div>
        <el-dialog title="学员信息" :visible.sync="detailVisible" width="65%">
            <div style="display: flex;margin-left: 35px;">
                <div>
                    <span style="font-size: 25px;font-weight: 600;margin-right: 20px;">学员信息</span>
                </div>
            </div>
            <div class="classmangement">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <div class="search">
                        <!-- 姓名 -->
                        <el-form-item label="姓名" prop="sname">
                            <el-input v-model.trim="ruleForm.sname" placeholder="请输入内容" style="width: 180px;"></el-input>
                        </el-form-item>
                        <!-- 性别 -->
                        <el-form-item label="姓别" prop="sex">
                            <el-select v-model.trim="ruleForm.sex" filterable placeholder="请选择" style="width: 180px;">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 在读状态 -->
                        <el-form-item label="在读状态" prop="studentstate">
                            <el-select v-model.trim="ruleForm.studentstate" filterable placeholder="请选择"
                                style="width: 180px;">
                                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="search">
                        <!-- 学校 -->
                        <el-form-item label="学校" prop="school">
                            <el-input v-model.trim="ruleForm.school" placeholder="请输入内容" style="width:620px;"></el-input>
                        </el-form-item>
                    </div>
                    <div class="search">
                        <!-- 专业 -->
                        <el-form-item label="专业" prop="professional">
                            <el-input v-model.trim="ruleForm.professional" placeholder="请输入内容"
                                style="width:290px;"></el-input>
                        </el-form-item>
                        <!-- 毕业时间 -->
                        <el-form-item label="毕业时间" prop="gradtime">
                            <el-date-picker v-model.trim="ruleForm.gradtime" type="date" placeholder="选择日期"
                                style="width:285px;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="search">
                        <!-- 手机号 -->
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model.trim="ruleForm.phone" placeholder="请输入内容" style="width:290px;"></el-input>
                        </el-form-item>
                        <!-- 出生年月 -->
                        <el-form-item label="出生年月" prop="borntime">
                            <el-date-picker v-model.trim="ruleForm.borntime" type="date" placeholder="选择日期"
                                style="width:285px;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="search">
                        <!-- 紧急联系人 -->
                        <el-form-item label="紧急联系人" prop="urgent">
                            <el-input v-model.trim="ruleForm.urgent" placeholder="请输入内容" style="width:290px;"></el-input>
                        </el-form-item>
                        <!-- 紧急联系人电话 -->
                        <el-form-item label="紧急联系人电话" prop="urgentphone">
                            <el-input v-model.trim="ruleForm.urgentphone" placeholder="请输入内容"
                                style="width:285px;"></el-input>
                        </el-form-item>
                    </div>
                    <div class="search">
                        <!-- 咨询老师 -->
                        <el-form-item label="咨询老师" prop="consulteacher">
                            <el-input v-model.trim="ruleForm.consulteacher" placeholder="请输入内容"
                                style="width: 180px;"></el-input>
                        </el-form-item>
                        <!-- 培训班级 -->
                        <el-form-item label="培训班级" prop="cid">
                            <el-select v-model.trim="ruleForm.cid" filterable placeholder="请选择" style="width: 180px;">
                                <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 学费 -->
                        <el-form-item label="学费" prop="tuition">
                            <el-input v-model.trim="ruleForm.tuition" placeholder="请输入内容" style="width: 180px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Addlearns',
    data() {
        return {
            ruleForm: {
                //培训班级
                cid: '',
                //姓名
                sname: '',
                //性别
                sex: '',
                //状态
                studentstate: '',
                //学校
                school: '',
                //专业
                professional: '',
                //毕业时间
                gradtime: '',
                //手机号
                phone: '',
                //出生年月
                borntime: '',
                //紧急联系人
                urgent: '',
                //紧急联系人电话
                urgentphone: '',
                //咨询老师
                consulteacher: '',
                // 入学时间
                enroltime: '',
                //学费
                tuition: ''
            },
            //性别
            options2: [{
                value: '选项1',
                label: '男'
            }, {
                value: '选项2',
                label: '女'
            },],
            //状态
            options3: [{
                value: '选项1',
                label: '在读'
            }, {
                value: '选项2',
                label: '毕业'
            }],
            //培训班级
            options4: [],
            rules: {
                sname: [
                    { required: true, message: '请填写姓名', trigger: 'blur' },
                ],
                school: [
                    { required: true, message: '请填写学校', trigger: 'blur' }
                ],
                borntime: [
                    { required: true, message: '请选择出生年月', trigger: 'blur' }
                ],
                gradtime: [
                    { required: true, message: '请选择毕业时间', trigger: 'blur' }
                ],
                professional: [
                    { required: true, message: '请填写专业', trigger: 'blur' }
                ],
                urgent: [
                    { required: true, message: '请填写紧急联系人', trigger: 'blur' }
                ],
                tuition: [
                    { required: true, pattern: /^[1-9]\d*$/, message: '请填写学费', trigger: 'blur' }
                ],
                consulteacher: [
                    { required: true, message: '请填写咨询老师', trigger: 'blur' }
                ],
                urgentphone: [
                    { required: true, pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '请输入正确格式', trigger: 'blur' },
                ],
                phone: [
                    { required: true, pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '请输入正确格式', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                studentstate: [
                    { required: true, message: '请选择在读状态', trigger: 'change' }
                ],
                cid: [
                    { required: true, message: '请选择培训班级', trigger: 'change' }
                ],

            },
            detailVisible: false
        }
    },
    methods: {
        init(data) {
            this.detailVisible = true;
            console.log(data)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    this.$axios.post('/statusmon/addStudent', this.ruleForm, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res => {
                        if (res.data.status !== 200) {
                            return this.$message({
                                type: 'error',
                                message: '新增学员失败'
                            });
                        }
                        this.ruleForm = {
                            //培训班级
                            cid: '',
                            //姓名
                            sname: '',
                            //性别
                            sex: '',
                            //状态
                            studentstate: '',
                            //学校
                            school: '',
                            //专业
                            professional: '',
                            //毕业时间
                            gradtime: '',
                            //手机号
                            phone: '',
                            //出生年月
                            borntime: '',
                            //紧急联系人
                            urgent: '',
                            //紧急联系人电话
                            urgentphone: '',
                            //咨询老师
                            consulteacher: '',
                            // 入学时间
                            enroltime: '',
                            //学费
                            tuition: ''
                        };
                        this.$message({
                            type: 'success',
                            message: '新增学员成功'
                        });
                        this.$emit('closeDialog', '这是传递给父组件的数据');
                        this.detailVisible = false;
                    }))
                } else {
                    return false;
                }
            });
        },
    },
    mounted() {
        this.$axios.get('/classmon/getClass',
            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                console.log(response.data.data);
                response.data.data.forEach((element) => {
                    let c = {};
                    c.value = element.classid;
                    c.label = element.classname;
                    this.options4.push(c);
                });;
            });
    }
}
</script>

<style lang="less" scoped>
.classmangement {
    height: 650px;
    margin: auto;
    padding: 20px;
}

.icon-plus {
    background-color: rgb(23, 97, 253);
    color: white;
}

.search {
    display: flex;
}

.search p {
    text-align: left;
    color: #69719D;
    margin-bottom: 0;
}

.search div {
    margin-right: 20px;
}

.class {
    margin-left: 20px;
}
</style>